<template>
  <div>
    <el-dropdown trigger="click">
      <span class="el-dropdown-link">
        Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
      </span>
      <template #dropdown>
        <div class="dropdown">
          <el-row>
            <el-col :span="9" class="p13777">Recipient:</el-col>
            <el-col :span="15" class="p13222">Emily Stehlik</el-col>
          </el-row>
          <el-row>
            <el-col :span="8" class="p13777">Address1:</el-col>
            <el-col :span="15" class="p13222">665 Saratoga Rd</el-col>
          </el-row>
          <el-row>
            <el-col :span="9" class="p13777">Recipient:</el-col>
            <el-col :span="15" class="p13222">Emily Stehlik</el-col>
          </el-row>
          <el-row>
            <el-col :span="9" class="p13777">Recipient:</el-col>
            <el-col :span="15" class="p13222">Emily Stehlik</el-col>
          </el-row>
          <el-row>
            <el-col :span="8" class="p13777">Address1:</el-col>
            <el-col :span="15" class="p13222">665 Saratoga Rd</el-col>
          </el-row>
          <el-row>
            <el-col :span="9" class="p13777">Recipient:</el-col>
            <el-col :span="15" class="p13222">Emily Stehlik</el-col>
          </el-row>
          <el-row>
            <el-col :span="9" class="p13777">Recipient:</el-col>
            <el-col :span="15" class="p13222">Emily Stehlik</el-col>
          </el-row>
          <el-button
            link
            type="danger"
            class="dbt"
            @click="dialogVisible = true"
            >Edit</el-button
          >
        </div>
      </template>
    </el-dropdown>
  </div>
  <ModifyAddress @handleClose="handleClose" :open="dialogVisible" />
</template>
<script lang="ts" setup>
import ModifyAddress from "@/components/ModifyAddress/index.vue";
import { ref } from "vue";

const dialogVisible = ref(false);
const handleClose = () => {
  dialogVisible.value = false;
};
</script>
<style lang="scss" scoped>
.dropdown {
  padding: 10px 20px;
  width: 230px;
  .el-row {
    padding: 5px 0;
  }
  .dbt {
    margin-left: -3px;
  }
}
</style>
